<template>
  <div class="personal_page">
    <div v-show="codeShow" class="login_container_box">
      <div class="login_container_middle">
        <span>
            <i class="el-icon-close close_code" @click="closeCode"></i>
           <div id="login_container"></div>
        </span>
       
      </div>
    </div>
    <el-container class="nav-box">
      <el-header>
        <el-row>
          <el-col class="logo-box" :span="6">
            <icon-font
              class="nav-logo"
              style="visibility: hidden;"
              icon="icon-global-001"
            />
            <span class="logo-name">
              <img :src="img.active_logo" alt="logo">
            </span>
          </el-col>
          <el-col :span="18" class="user-info" style="padding-right: 16px;">
            <el-dropdown v-if="positionList.length">
              <div class="el-dropdown-link position">
                <div class="positionInfo">
                  <span>{{ companyName === null || companyName === 'null' ? '' : companyName}}</span>
                  <span>{{ positionName || '' }}</span>
                </div>
                <i
                  v-if="positionList.length"
                  class="el-icon-arrow-down el-icon--right"
                />
              </div>
              <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item
                  v-for="(item, index) in positionList"
                  :key="index"
                  @click.native="choosePosition(item.companyId)"
                  style="
                    display: flex;
                    flex-direction: column;
                    text-align: right;
                  "
                >
                  <span>{{ item.companyName }}</span>
                  <span>{{ item.positionName }}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!-- 用户信息，修改密码 -->
            <el-dropdown @command="handleDropdown">
              <span class="el-dropdown-link">
                {{ $store.state.userName || '--' }}
                <i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item command="putPass">修改密码</el-dropdown-item> -->
                <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                <el-dropdown-item
                  v-show="showCompanyCenter"
                  command="enterPriseCenter"
                  >企业中心</el-dropdown-item
                >

                <el-dropdown-item command="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>

      <el-main v-loading="allPageLoading">
        <div class="separator_box">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              ><span class="home" @click="home">首页</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item class="curry_item">个人中心</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="login_bg_box">
          <div class="login_box">
            <div class="login_picture">
              <div class="edit_image_box">
                <cropper-upload
                  ref="cropperUploadComponent"
                  @cropperSubmit="cropperSubmit"
                ></cropper-upload>
                <img
                  class="user_image"
                  @click="reUpload"
                  style="cursor: pointer;"
                  :src="userImage"
                  alt="logo"
                />
              </div>
            </div>
            <div class="login_info">
              <p class="user_name">
                {{ currentUserInfo.loginName || '' }}
                <img
                  v-if="currentUserInfo.gender && currentUserInfo.gender === 1"
                  class="boyIcon"
                  :src="boyIcon"
                />
                <img 
                v-if="currentUserInfo.gender && currentUserInfo.gender === 2"
                class="girlIcon" :src="girlIcon" />
              </p>
              <p class="date">
                注册日期：{{ currentUserInfo.createdAt || '' }}
              </p>
              <p class="date">
                上次登录日期：{{ currentUserInfo.lastLoginDate || '' }}
              </p>
            </div>
          </div>
        </div>
        <div class="split_bg"></div>
        <div class="main_box">
          <div class="title_box">
            <span class="title_type"
              ><el-image
                alt="验证码"
                class="IconPerson"
                :src="IconPerson"
              />
              <span>我的资料</span>
              </span
            >
            <span @click="edit" class="edit">编辑</span>
          </div>
          <div class="profile_box">
            <div class="profile_box_item">
              <span class="profile_label">用户名：</span>
              <span>{{ currentUserInfo.loginName || '' }}</span>
            </div>
            <div class="profile_box_item">
              <span class="profile_label">姓名：</span>
              <span>{{ currentUserInfo.userName || '' }}</span>
            </div>
            <div class="profile_box_item">
              <span class="profile_label">&nbsp;&nbsp;&nbsp;&nbsp;性别：</span>
              <span>{{
                currentUserInfo.genderStr || ''
              }}</span>
            </div>
            <div class="profile_box_item">
              <span class="profile_label">邮箱：</span>
              <span>{{ currentUserInfo.mail || '' }}</span>
            </div>
            <div class="profile_box_item idCard">
              <span class="profile_label">身份证号：</span>
              <span>{{ currentUserInfo.idCard || '' }}</span>
            </div>
          </div>
          <!-- 账号设置 -->
          <div class="title_box">
            <span class="title_type">
              <el-image alt="验证码" class="zhseIcon" :src="zhseIcon" />
              <span>账号设置</span>
            </span>
          </div>
          <div class="profile_box profile_set_box">
            <div class="account_profile_box_item">
              <div class="icon_box">
                <el-image
                  alt="验证码"
                  class="zhanghaomima"
                  :src="img.account"
                />
              </div>
              <div class="account_box">
                <div class="account_title">账号密码</div>
                <div class="account_prompt">
                  建议您定期更换密码，设置安全性高的密码可以使账号更安全
                </div>
                <div>
                  <span @click="update_pwd"
                    >
                    <icon-font icon='iconpc-other_qgl1x'></icon-font>
                    修改密码</span
                  >
                  <span @click="phoneClick"
                    >
                    <icon-font icon='iconpc-other_qgl1x'></icon-font>
                    手机改密</span
                  >
                  <span @click="updateAccountShow"
                    >
                    <icon-font icon='iconpc-other_qgl1x'></icon-font>
                    修改账号</span
                  >
                </div>
              </div>
            </div>
            <div class="account_profile_box_item">
              <div class="icon_box">
                <el-image
                  alt="验证码"
                  class="anquanshouji"
                  :src="img.phone"
                />
              </div>
              <div class="account_box">
                <div class="account_title">
                  安全手机
                  <span class="cuury_phone">{{
                    currentUserInfo.phone || ''
                  }}</span>
                </div>
                <div class="account_prompt">
                  安全手机可以用于登录账号，重置密码或其他安全验证
                </div>
                <div>
                  <span @click="updataPhpneNumberShow"
                    >
                    <icon-font icon='iconpc-other_qgl1x'></icon-font>
                    修改手机</span
                  >
                </div>
              </div>
            </div>
            <div class="account_profile_box_item">
              <div class="icon_box">
                <el-image
                  alt="验证码"
                  class="anquanyouxiang"
                  :src="img.email"
                />
              </div>
              <div class="account_box">
                <div class="account_title">安全邮箱</div>
                <div class="account_prompt">
                  绑定邮箱可以用于接收业务提醒信息
                </div>
                <div>
                  <span @click="updateEmailModelShow"
                    >
                    <icon-font icon='iconpc-other_qgl1x'></icon-font>
                    修改邮箱</span
                  >
                </div>
              </div>
            </div>
            <div class="account_profile_box_item">
              <div class="icon_box">
                  <!-- <i class="el-icon-chat-line-round set_icon"></i> -->
                  <el-image
                    alt="验证码"
                    class="anquanshouji"
                    :src="img.wchat"
                  />
              </div>
              <div class="account_box">
                  <div class="account_title we_chat_title"><span class="we_chat">微信</span>
                     <span  :class="{'adopt': isBind, 'refuse': !isBind}">
                       <icon-font :icon='isBind ? "iconpc-alert_ywcrz1x": "iconpc-alert_wrzsq1x"'></icon-font>{{isBind? '已绑定': '未绑定'}}
                     </span>
                    <!-- <i v-if="isBind" class="el-icon-circle-check isOk">&nbsp;&nbsp;已绑定</i> <i v-if="!isBind" class="el-icon-warning-outline unauthenticated">&nbsp;&nbsp;未绑定</i> -->
                  </div>
                  <div class="account_prompt">微信可以用于扫描登录，同时用于接收部分业务提醒信息</div>
                  <div>
                    <span v-if="isBind" @click="unbind">
                      <icon-font icon='iconpc-other_qgl1x'></icon-font>
                      解除绑定
                    </span>
                    <span v-if="!isBind"  @click="showCode">
                      <icon-font icon='iconpc-other_qgl1x'></icon-font>
                      去绑定
                    </span>
                  </div>
              </div>
          </div>
          </div>
          <!-- 电子签章设置 -->
          <div class="title_box">
            <span class="title_type">
              <el-image alt="验证码" class="yinzhangIcon" :src="yinzhangIcon" />
              <span>电子签章设置</span>
            </span
            >
          </div>
          <div class="profile_box">
            <div class="account_profile_box_item">
              <div class="icon_box">
                <el-image
                  alt="验证码"
                  class="gerenrenzheng"
                  :src="img.personal"
                />
              </div>
              <div class="account_box">
                <div class="account_title">
                  <span class="authentication">个人认证</span>
                  <span  :class="{'adopt': personIfCertification, 'refuse': !personIfCertification}">
                    <icon-font :icon='personIfCertification ? "iconpc-alert_ywcrz1x": "iconpc-alert_wrzsq1x"'></icon-font>{{personIfCertification? '已认证': '未认证'}}
                  </span>
                  <!-- <el-image
                    v-if="personIfCertification"
                    alt="验证码"
                    class="yirenzheng"
                    :src="yirenzheng"
                  /> -->
                  <!-- <el-image
                    v-else
                    alt="验证码"
                    class="weirenzheng"
                    :src="weirenzheng"
                  /> -->
                  <!-- <span v-if="personIfCertification" class="isOk">已认证</span>
                  <span v-else class="unauthenticated">未认证</span> -->
                </div>
                <div class="account_prompt">
                  电子签章个人身份认证成功后，可通过企业授权电子签章，开展相关业务。
                </div>
                <div>
                  <span>
                    <!-- <el-image alt="验证码" v-if="!personIfCertification && String(companyId) !== '0'" class="shuru" :src="shuru" /> -->
                    <el-button
                      type="text"
                      v-if="!personIfCertification && String(companyId) !== '0'"
                      @click="goCertification"
                      >
                      <icon-font icon='iconpc-other_cxrzicon1x' v-if="!personIfCertification && String(companyId) !== '0'"></icon-font>
                      去认证</el-button
                    >
                    <el-button
                      class="recertification"
                      type="text"
                      @click="handlePersonalShow"
                      v-if="personIfCertification && String(companyId) !== '0'"
                      >
                      <icon-font icon='iconpc-other_cxrzicon1x'></icon-font>
                      重新认证</el-button
                    >
                  </span>
                  <!-- <span v-if="currentUserInfo.auditStatus === 1">重新认证</span>
                    <span>重新认证</span>
                    <span>未认证</span> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 修改密码弹框 -->
        <el-dialog
          width="480px"
          title="修改登录密码"
          @close="closeDialog('form')"
          :visible.sync="dialogFormVisible"
          :close-on-click-modal="false"
          class="updae_password_box"
        >
          <el-form :rules="rules" :model="form" ref="form">
            <el-form-item
              label="旧密码"
              prop="password"
              :label-width="formLabelWidth"
            >
              <span class="icon_start">*</span>
              <el-input
                type="password"
                placeholder="请输入原始密码"
                v-model="form.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="新密码"
              prop="newPassword"
              :label-width="formLabelWidth"
            >
              <span class="icon_start">*</span>
              <el-input
                type="password"
                placeholder="请输入新的登录密码"
                v-model="form.newPassword"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="alignnewPassword_box"
              label=""
              prop="alignnewPassword"
              :label-width="formLabelWidth"
            >
              <el-input
                type="password"
                placeholder="请再次输入登录密码"
                v-model="form.alignnewPassword"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="description">
            密码由6～16位字母与数字组合
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button class="dialogClose" @click="dialogFormVisible = false"
              >取 消</el-button
            >
            <el-button class="dialogOk" type="primary" @click="updaePassword"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!--  手机修改密码-->
        <el-dialog
          :close-on-click-modal="false"
          class="phone_dialog_box"
          width="480px"
          title="手机改密"
          :visible.sync="phoneDialogVisible"
        >
          <el-steps
            class="steps_box"
            align-center
            :active="phoneStepStatus"
            :space="300"
          >
            <el-step title="验证身份信息"></el-step>
            <el-step title="设置新的密码"></el-step>
            <el-step title="密码修改成功"></el-step>
          </el-steps>
          <p class="news">为确认身份，我们需验证您的安全手机</p>
          <p class="news">如果您当前的手机号已无法使用请联系客服</p>
          <div class="phone_number_box">
            当前安全手机：<span class="phone_number">{{
              this.currentUserInfo.phone || ''
            }}</span>
          </div>
          <div class="verification_code_box">
            <el-input
              class="verification_code"
              placeholder="请输入短信验证码"
              v-model="verificationCode"
              autocomplete="off"
            ></el-input>
            <span
              @click="
                updatePasswordByPhoneSendVerificationCode(
                  cookie.get('phone'),
                  1
                )
              "
              v-if="updatePasswordByPhoneVerificationStatus === 0"
              class="get_verification_code"
              >获取验证码</span
            >
            <span
              @click="
                updatePasswordByPhoneSendVerificationCode(
                  cookie.get('phone'),
                  1
                )
              "
              v-if="updatePasswordByPhoneVerificationStatus === 2"
              class="aggin_get_verification_code"
              >重新获取验证码</span
            >
            <span
              v-if="updatePasswordByPhoneVerificationStatus === 1"
              class="get_verification_code_after"
              ><span>{{ updatePasswordByPhoneTime }}</span
              >秒可重新获取</span
            >
          </div>
          <div
            class="next_btn"
            @click="
              updatePasswordByPhoneNext(cookie.get('phone'), verificationCode)
            "
          >
            下一步
          </div>
          <div v-if="errorState" class="error_box">
            <i class="el-icon-circle-close"></i>验证码不正确，请重新输入
          </div>
        </el-dialog>
        <el-dialog
          :close-on-click-modal="false"
          class="phone_dialog_update_password_box"
          width="480px"
          title="修改密码"
          @close="closeDialog('updatePasswordByPhoneForm')"
          :visible.sync="phoneDialogPasswordUpdateVisible"
        >
          <el-steps class="steps_box" align-center :active="phoneStepStatus">
            <el-step title="验证身份信息"></el-step>
            <el-step title="设置新的密码"></el-step>
            <el-step title="密码修改成功"></el-step>
          </el-steps>
          <div class="remember_password">请牢记密码</div>
          <el-form
            class="dialog_form_box"
            :rules="updatePasswordByPhoneRules"
            :model="updatePasswordByPhoneForm"
            ref="updatePasswordByPhoneForm"
          >
            <el-form-item label="" prop="newPassword" label-width="0">
              <el-input
                type="password"
                placeholder="请输入新的密码"
                v-model="updatePasswordByPhoneForm.newPassword"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="" prop="alignnewPassword" label-width="0">
              <el-input
                type="password"
                placeholder="请再次输入新的密码"
                v-model="updatePasswordByPhoneForm.alignnewPassword"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="next_btn" @click="updatePassword">下一步</div>
          <div v-if="errorState" class="error_box">
            <i class="el-icon-circle-close"></i>验证码不正确，请重新输入
          </div>
        </el-dialog>
        <!-- 修改账号 -->
        <el-dialog
          class="updae_login_box"
          :close-on-click-modal="false"
          width="480px"
          title="修改登录账号"
          @close="closeDialog('updateAccountForm')"
          :visible.sync="updateAccountVisible"
        >
          <el-form
            ref="updateAccountForm"
            :rules="updateAccountFormRules"
            :model="updateAccountForm"
          >
            <el-form-item
              class="login_name_box"
              label="原账号"
              prop="loginName"
              :label-width="formLabelWidth"
            >
              <el-input
                placeholder="请输入原始账号"
                v-model="updateAccountForm.loginName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="login_name_box"
              label="新账号"
              prop="newLoginName"
              :label-width="formLabelWidth"
            >
              <el-input
                placeholder="请输入新账号"
                v-model="updateAccountForm.newLoginName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="输入密码"
              prop="password"
              :label-width="formLabelWidth"
            >
              <el-input
                type="password"
                placeholder="请输入登录密码"
                v-model="updateAccountForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button class="dialogClose" @click="updateAccountVisible = false"
              >取 消</el-button
            >
            <el-button class="dialogOk" type="primary" @click="updateAccount"
              >确 定</el-button
            >
          </div>
        </el-dialog>

        <!-- 修改手机号码 -->
        <el-dialog
          :close-on-click-modal="false"
          class="phone_Number_dialog_box"
          width="480px"
          title="修改手机号码"
          :visible.sync="phoneNumberDialogVisible"
        >
          <el-steps
            class="steps_box"
            align-center
            :active="phoneNumberStepStatus"
          >
            <el-step title="验证身份信息"></el-step>
            <el-step title="验证新的号码"></el-step>
            <el-step title="完成号码更换"></el-step>
          </el-steps>
          <p class="news">为确认身份，我们需验证您的安全手机</p>
          <p class="news">如果您当前的手机号已无法使用请联系客服</p>
          <div class="phone_number_box">
            当前安全手机：<span class="phone_number">{{
              this.currentUserInfo.phone || ''
            }}</span>
          </div>
          <div class="verification_code_box">
            <el-input
              class="verification_code"
              placeholder="请输入短信验证码"
              v-model="phoneNumberVerificationCode"
              autocomplete="off"
            ></el-input>
            <span
              @click="updatePhoneSendVerificationCode(cookie.get('phone'), 0)"
              v-if="updatePhoneVerificationStatus === 0"
              class="get_verification_code"
              >获取验证码</span
            >
            <span
              @click="updatePhoneSendVerificationCode(cookie.get('phone'), 0)"
              v-if="updatePhoneVerificationStatus === 2"
              class="aggin_get_verification_code"
              >重新获取验证码</span
            >
            <span
              v-if="updatePhoneVerificationStatus === 1"
              class="get_verification_code_after"
              ><span>{{ updatePhoneVerificationCodeTime }}</span
              >秒可重新获取</span
            >
          </div>
          <div
            class="next_btn"
            @click="
              phoneNumberUpdateNext(
                cookie.get('phone'),
                phoneNumberVerificationCode
              )
            "
          >
            下一步
          </div>
          <div v-if="errorState" class="error_box">
            <i class="el-icon-circle-close"></i>验证码不正确，请重新输入
          </div>
        </el-dialog>
        <el-dialog
          :close-on-click-modal="false"
          class="phone_dialog_update_password_bo"
          width="480px"
          title="修改手机号码"
          @close="closeDialog('updatePhoneForm')"
          :visible.sync="phoneNumberupdateVisible"
        >
          <el-steps
            class="steps_box"
            align-center
            :active="phoneNumberStepStatus"
          >
            <el-step title="验证身份信息"></el-step>
            <el-step title="验证新的号码"></el-step>
            <el-step title="完成号码更换"></el-step>
          </el-steps>
          <el-form
            class="dialog_form_box"
            ref="updatePhoneForm"
            :rules="updatePhoneFormRules"
            :model="updatePhoneForm"
          >
            <el-form-item label="" prop="newPhone" label-width="0">
              <el-input
                placeholder="请输入新的手机号"
                v-model="updatePhoneForm.newPhone"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <div class="verification_code_box">
              <el-input
                class="verification_code"
                placeholder="请输入短信验证码"
                v-model="verificationCode"
                autocomplete="off"
              ></el-input>
              <span
                @click="
                  sendRegistVerificationCodeByNewPhone(
                    updatePhoneForm.newPhone || '',
                    0
                  )
                "
                v-if="newPhoneVerificationStatus === 0"
                class="get_verification_code"
                >获取验证码</span
              >
              <span
                @click="
                  sendRegistVerificationCodeByNewPhone(
                    updatePhoneForm.newPhone || '',
                    0
                  )
                "
                v-if="newPhoneVerificationStatus === 2"
                class="aggin_get_verification_code"
                >重新获取验证码</span
              >
              <span
                v-if="newPhoneVerificationStatus === 1"
                class="get_verification_code_after"
                ><span>{{ newPhonesendRegistVerificationCodeTime }}</span
                >秒可重新获取</span
              >
            </div>
          </el-form>
          <div class="next_btn" @click="updatePhoneNumber">下一步</div>
          <div v-if="errorState" class="error_box">
            <i class="el-icon-circle-close"></i>验证码不正确，请重新输入
          </div>
        </el-dialog>
        <!-- 修改邮箱验证 -->
        <el-dialog
          :close-on-click-modal="false"
          class="phone_email_dialog_box"
          width="480px"
          title="修改邮箱"
          :visible.sync="phoneEmailDialogVisible"
        >
          <el-steps class="steps_box" align-center :active="emailStepStatus">
            <el-step title="验证身份信息"></el-step>
            <el-step title="验证新的邮箱"></el-step>
            <el-step title="完成邮箱更换"></el-step>
          </el-steps>
          <p class="news">为确认身份，我们需验证您的安全手机</p>
          <p class="news">如果您当前的手机号已无法使用请联系客服</p>
          <div class="phone_number_box">
            当前安全手机：<span class="phone_number">{{
              this.currentUserInfo.phone || ''
            }}</span>
          </div>
          <div class="verification_code_box">
            <el-input
              class="verification_code"
              placeholder="请输入短信验证码"
              v-model="verificationCode"
              autocomplete="off"
            ></el-input>
            <span
              @click="emailByHonesendVerificationCode(cookie.get('phone'), 0)"
              v-if="emailVerificationByPhoneStatus === 0"
              class="get_verification_code"
              >获取验证码</span
            >
            <span
              @click="emailByHonesendVerificationCode(cookie.get('phone'), 0)"
              v-if="emailVerificationByPhoneStatus === 2"
              class="aggin_get_verification_code"
              >重新获取验证码</span
            >
            <span
              v-if="emailVerificationByPhoneStatus === 1"
              class="get_verification_code_after"
              ><span>{{ emailByphoneTime }}</span
              >秒可重新获取</span
            >
          </div>
          <div
            class="next_btn"
            @click="updataEmailNext(cookie.get('phone'), verificationCode)"
          >
            下一步
          </div>
          <div v-if="errorState" class="error_box">
            <i class="el-icon-circle-close"></i>验证码不正确，请重新输入
          </div>
        </el-dialog>
        <el-dialog
          :close-on-click-modal="false"
          class="phone_dialog_update_password_box"
          width="480px"
          title="修改邮箱"
          @close="closeDialog('updateEmailForm')"
          :visible.sync="phoneEmailupdateVisible"
        >
          <el-steps class="steps_box" align-center :active="emailStepStatus">
            <el-step title="验证身份信息"></el-step>
            <el-step title="验证新的邮箱"></el-step>
            <el-step title="完成邮箱更换"></el-step>
          </el-steps>
          <el-form
            class="dialog_form_box"
            ref="updateEmailForm"
            :rules="updateEmailFormRules"
            :model="updateEmailForm"
          >
            <el-form-item label="" prop="newMail" label-width="0">
              <el-input
                placeholder="请输入新的邮箱"
                v-model="updateEmailForm.newMail"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <div class="verification_code_box">
              <el-input
                class="verification_code"
                placeholder="请输入邮箱验证码"
                v-model="updateEmailForm.verificationCode"
                autocomplete="off"
              ></el-input>
              <span
                @click="sendMailVerificationCode(updateEmailForm.newMail)"
                v-if="emailVerificationStatus === 0"
                class="get_verification_code"
                >获取验证码</span
              >
              <span
                @click="sendMailVerificationCode(updateEmailForm.newMail)"
                v-if="emailVerificationStatus === 2"
                class="aggin_get_verification_code"
                >重新获取验证码</span
              >
              <span
                v-if="emailVerificationStatus === 1"
                class="get_verification_code_after"
                ><span>{{ emailTime }}</span
                >秒可重新获取</span
              >
            </div>
          </el-form>
          <div class="next_btn" @click="updateEmail">下一步</div>
          <div v-if="errorState" class="error_box">
            <i class="el-icon-circle-close"></i>验证码不正确，请重新输入
          </div>
        </el-dialog>
        <!-- 修改成功弹窗 -->
        <el-dialog
          :show-close="false"
          :close-on-click-modal="false"
          class="dialog_update_success"
          width="480px"
          :title="successTitle"
          :visible.sync="updateSuccessVisible"
        >
          <div class="success_icon"><i class="el-icon-circle-check"></i></div>
          <p class="success_reply">{{ successReply }}</p>
          <p class="prompt">{{ prompt }}</p>
          <div class="next_btn" @click="againLogin">重新登录</div>
        </el-dialog>
        <!-- 修改邮箱成功弹窗 -->
        <el-dialog
          :close-on-click-modal="false"
          class="dialog_update_success"
          width="480px"
          :title="successTitle"
          :visible.sync="emailUpdateSuccessVisible"
        >
          <div class="success_icon"><i class="el-icon-circle-check"></i></div>
          <p class="success_reply">恭喜您！邮箱修改成功</p>
          <div class="next_btn" @click="closeEmailDialog">确定</div>
        </el-dialog>
        <el-dialog title="提示" :visible.sync="showPersonalDialog" width="30%">
          <h1 class="text">重新认证确认</h1>

          <span>{{ '个人认证已认证，是否确认进行重新认证？' }}</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="handlePersonalClose">取 消</el-button>
            <el-button type="primary" @click="personalRecertification"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import {mapState} from 'vuex'
import auth from '@mixins/auth'
import {username} from '@const/formValidate.js'
import md5 from 'js-md5'
import {hasIn} from 'lodash'
import cookie from 'js-cookie'
import {
  fddWebQueryPersonalCertification,
  fddWebApplyPersonalCertification,
} from '@const/api_interfaceCenter'

import {
  companyRepeatCertification,
  personalRepeatCertification,
} from '@const/api_interface'

import {
  AcOverallStructureInfoSaveOrUpdate,
  AcOverallStructureInfoGetByFactoryCompanyId,
} from '@const/api_authCenter.js'

import {
  getCurrentUserInfo,
  updateUserPassword,
  sendVerificationCode,
  updatePasswordByPhoneForPC,
  updateLoginName,
  updatePhoneForPC,
  sendMailVerificationCode,
  sendMailVerificationCodeByTokenId,
  updateMail,
  UcMerchantUserGetById,
  orderBackUcMerchantIdentityUsergetById,
  updateUserIdentityInfo,
  updateAvatar,
  sendRegistVerificationCode,
  sendRegistVerificationCodeByTokenId,
  bindingOpenPlatformWechat,
  unbindingWechat,
  checkVerificationCodeReturnToken
} from '@const/api_staffCenter'
import VerificationSuccess from '@/moduleComponents/personal'
import EditImage from '@assets/personl/touxiang.png'
import loginBg from '@assets/personl/jibenxinxiditu.png'
import IconPerson from '@assets/personl/icon-person.png'

import ZhseIcon from '@assets/personl/zhse-icon.png'
import zhanghaomima from '@assets/personl/zhanghaomima.png'
import Anquanshouji from '@assets/personl/anquanshouji.png'
import Anquanyouxiang from '@assets/personl/anquanyouxiang.png'
import Weixin2 from '@assets/personl/weixin-2.png'
import YinzhangIcon from '@assets/personl/yinzhang-icon.png'
import BoyIcon from '@assets/personl/boy-icon.png'
import GirlIcon from '@assets/personl/girl-icon.png'
import Shuru from '@assets/personl/shuru.png'
import Weirenzheng from '@assets/personl/weirenzheng.png'
import Yirenzheng from '@assets/personl/yirenzheng.png'
import Gerenrenzheng from '@assets/personl/gerenrenzheng.png'

import cropperUpload from '@/moduleComponents/personal/cropperUpload'
import {Encrypt} from '@const/utils.js'
const TIME_COUNT = 60
export default {
  mixins: [auth],
  layout: 'blank',
  components: {VerificationSuccess, cropperUpload},
  data() {
    var checkPassword = (rule, value, callback) => {
      let reg = new RegExp(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/)
      let result = reg.test(value)
      if (!result) {
        return callback(
          new Error('密码由6-16位字母与数字组合')
        )
      } else {
        callback()
      }
    }
    var checkloginName = (rule, value, callback) => {
      let result =
        this.updateAccountForm.loginName === this.currentUserInfo.loginName
      if (!result) {
        return callback(new Error('请输入正确的原账号'))
      } else {
        callback()
      }
    }

    var checkPhone = (rule, value, callback) => {
      let reg = new RegExp(/^1[23456789][0-9]{9}$/)
      let result = reg.test(value)
      if (!result) {
        return callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    var checkEmail = (rule, value, callback) => {
      let reg = new RegExp(
        /^([a-zA-Z0-9]+[_|bai\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
      )
      let result = reg.test(value)
      if (!result) {
        return callback(new Error('请输入正确的邮箱'))
      } else {
        callback()
      }
    }

    return {
      img:{
        active_logo: require('@assets/img/login/pc-caise-logo.png'),
        account: require('@assets/personl/zhanghaomima.png'),
        phone: require('@assets/personl/anquanshouji.png'),
        email: require('@assets/personl/anquanyouxiang.png'),
        wchat: require('@assets/personl/weixin-2.png'),
        personal: require('@assets/personl/gerenrenzheng.png')
      },  
      personIfCertification: '',
      gerenrenzheng: Gerenrenzheng,
      yirenzheng: Yirenzheng,
      weirenzheng: Weirenzheng,
      shuru: Shuru,
      girlIcon: GirlIcon,
      boyIcon: BoyIcon,
      yinzhangIcon: YinzhangIcon,
      weixin2: Weixin2,
      zhseIcon: ZhseIcon,
      zhanghaomima: zhanghaomima,
      anquanshouji: Anquanshouji,
      anquanyouxiang: Anquanyouxiang,
      IconPerson: IconPerson,
      userImage: EditImage,
      cookie: cookie,
      currentUserInfo: {},
      errorState: false,
      emailUpdateSuccessVisible: false,
      phoneEmailupdateVisible: false,
      emailStepStatus: 1,
      phoneEmailDialogVisible: false,
      phoneNumberupdateVisible: false,
      phoneNumberStepStatus: 1,
      phoneNumberDialogVisible: false,
      updateAccountVisible: false,
      successTitle: '',
      updateSuccessVisible: false,
      phoneStepStatus: 1,
      phoneDialogPasswordUpdateVisible: false, //手机密码修改
      verificationStatus: 0,
      phoneNumberVerificationCode: '',
      updatePasswordByPhoneVerificationStatus: 0,
      newPhoneVerificationStatus: 0,
      updatePhoneVerificationStatus: 0,
      emailVerificationByPhoneStatus: 0,
      emailVerificationStatus: 0,
      newPhonesendRegistVerificationCodeTime: 30,
      emailTime: 30,
      emailByphoneTime: 30,
      updatePhoneVerificationCodeTime: 30,
      updatePasswordByPhoneTime: 30,
      phoneDialogVisible: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      showPersonalDialog: false,
      successReply: '',
      prompt: '',
      form: {
        password: '',
        newPassword: '',
        alignnewPassword: '',
      },
      updatePasswordByPhoneForm: {
        password: '',
        newPassword: '',
        alignnewPassword: '',
      },
      updateAccountForm: {
        //修改账户
        newLoginName: '',
        loginName: '',
        password: '',
      },
      updatePhoneForm: {
        //修改手机号
        verificationCode: '',
        newPhone: '',
      },
      updateEmailForm: {
        newMail: '',
        verificationCode: '',
      },
      verificationCode: '',
      rules: {
        password: [{validator: checkPassword, trigger: 'blur'}],
        newPassword: [{validator: checkPassword, trigger: 'blur'}],
        alignnewPassword: [{validator: checkPassword, trigger: 'blur'}],
      },
      updatePasswordByPhoneRules: {
        newPassword: [{validator: checkPassword, trigger: 'blur'}],
        alignnewPassword: [{validator: checkPassword, trigger: 'blur'}],
      },
      updatePhoneFormRules: {
        newPhone: [{validator: checkPhone, trigger: 'blur'}],
      },
      //修改账号验证
      updateAccountFormRules: {
        password: [{validator: checkPassword, trigger: 'blur'}],
        loginName: [
          {validator: checkloginName, required: true, trigger: 'blur'},
        ],
        newLoginName: [
          {required: true, message: '请输入新用户名', trigger: 'blur'},
        ],
      },
      updateEmailFormRules: {
        newMail: [{validator: checkEmail, trigger: 'blur'}],
      },
      formLabelWidth: '90px',
      allPageLoading: false, // 页面loading
      maxNumber: 30,
      //手机修改密码获取验证码
      updatePasswordByPhoneSendVerificationCodeinterval: '',
      //修改手机号获取验证码
      updatePhoneSendVerificationCodeInterval: '',
      //新手机号发送验证码
      sendRegistVerificationCodeByNewPhoneInterval: '',
      //获取手机验证码（邮箱）
      emailByHonesendVerificationCodeInterval: '',
      //获取发送邮箱验证码
      sendMailVerificationCodeInterval: '',
      codeShow:false,
      isBind:false,
      updatePasswordToken: '',
      updatePhoneToken: '',
      updataEmailToken: ''
    }
    var checkPassword = (rule, value, callback) => {
      console.log('value:', value)
    }
  },
  mounted() {
    console.log('====guokeMdoorServeDev', `${window.location.origin}/#/?&response_type=code&scope=snsapi_login&state=""#/systemSetup/personal`)
    console.log('=====process.env.ROUTER_BASE:', window.location.origin)
    this.getCurrentUserInfo()
    this.$store.dispatch('getPositionList')
    this.queryPersonalCertification()
    !function(a,b,c){
      function d(a){
        var c="default";
        a.self_redirect===!0?c="true":a.self_redirect===!1&&(c="false");
        var d=b.createElement("iframe"),e="https://open.weixin.qq.com/connect/qrconnect?appid="+a.appid+"&scope="+a.scope+"&redirect_uri="+a.redirect_uri+"&state="+a.state+"&login_type=jssdk&self_redirect="+c+'&styletype='+(a.styletype || '')+'&sizetype='+(a.sizetype || '')+'&bgcolor='+(a.bgcolor || '')+'&rst='+(a.rst || '');e+=a.style?"&style="+a.style:"",e+=a.href?"&href="+a.href:"",d.src=e,d.frameBorder="0",d.allowTransparency="true",d.scrolling="no",d.width="300px",d.height="400px";
        var f=b.getElementById(a.id);
        f.innerHTML="",f.appendChild(d)
        console.log('===d:', d)
      }
      a.WxLogin=d
      }(window,document);
      var obj = new WxLogin({
          id: "login_container",
          appid: "wxdc0a4673877769f2",
          scope: "snsapi_login",
          redirect_uri: encodeURI(`${window.location.origin}/#/?&response_type=code&scope=snsapi_login&state=""#/systemSetup/personal`),
          state: "",
          style: "",
          href: ""
      })
    function getQueryVariable(variable){
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){return pair[1];}
      }
      return(false);
    }
    // let code = getQueryVariable('code')
    let code = cookie.get('bindWechatCode')
    console.log('bindWechatCode:', code)
    if (code) {
      this.bindingOpenPlatformWechat(code)
    }
  },
  computed: {
    showCompanyCenter() {
      return (this.$store.state.ifAdmin === 'true' && this.$store.state.companyId !== '0') || (this.$store.state.ifAdmin === true && this.$store.state.companyId !== '0')
    },
    ...mapState([
      'positionCompanyName',
      'companyName',
      'companyId',
      'positionName',
      'positionList',
      'positionId',
    ]),

    showCompanyCode() {
      let companyCode = this.$store.state.companyCode
      return companyCode && companyCode !== 'null'
    },
    // 计算多个公司的展示
    customCompanyName() {
      return this.$store.state.companyName !== 'null'
        ? this.$store.state.companyName || '平台管理员'
        : '平台管理员'
    },
  },
  watch: {},
  methods: {
    //初始化当前用户基础信息
    getCurrentUserInfo() {
      this.$axios({
        method: 'post',
        url: getCurrentUserInfo,
        data: {},
      })
        .then((res) => {
          if (res.status === 200) {
            this.currentUserInfo = res.data.payload || {}
            this.userImage = this.currentUserInfo.avatar || EditImage
            this.isBind =  this.currentUserInfo.openid ? true : false
          }
          console.log('this.currentUserInfo:', this.currentUserInfo)
        })
        .finally(() => {})
    },
    //个人电子签章重新认证
    personalRecertification() {
      this.$axios
        .$get(personalRepeatCertification)
        .then((res) => {
          if (res.code === '0') {
            let obj = hasIn(res, 'payload') ? res.payload : {}
            if (obj.fddUrl) {
              window.open(obj.fddUrl, '_blank')
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .finally(() => {
          this.showPersonalDialog = false
        })
    },
    handlePersonalClose() {
      this.showPersonalDialog = false
    },
    handlePersonalShow() {
      this.showPersonalDialog = true
    },
    // 修改邮箱
    updateEmailModelShow() {
      this.phoneEmailDialogVisible = true
      this.emailStepStatus = 1
      this.initModel()
      this.updateEmailForm.verificationCode = ''
      clearInterval(this.emailByHonesendVerificationCodeInterval)
      this.emailVerificationByPhoneStatus = 0
      clearInterval(this.sendMailVerificationCodeInterval)
      this.emailVerificationStatus = 0
    },

    updateEmail() {
      this.$refs['updateEmailForm'].validate((valid) => {
        if (valid) {
          this.$axios({
            method: 'post',
            url: updateMail,
            data: {
              ...this.updateEmailForm,
              tokenId: this.updataEmailToken
            },
          })
            .then((res) => {
              console.log('res:', res)
              if (res.data.code === '0') {
                this.$message({
                  type: 'success',
                  message: '邮箱修改成功!',
                })
                this.emailStepStatus = 3
                this.successTitle = '修改邮箱'
                this.successReply = '恭喜您！邮箱修改成功'
                this.phoneEmailupdateVisible = false
                this.emailUpdateSuccessVisible = true
                this.currentUserInfo.mail = this.updateEmailForm.newMail
                this.updateEmailForm.verificationCode = ''
              } else {
                this.errorState = true
              }
            })
            .catch(() => {
              this.errorState = true
            })
            .finally((res) => {})
        }
      })
    },
    //手机修改密码下一步
    updatePasswordByPhoneNext(phone, verificationCode) {
      if (this.verificationCode) {
        this.$axios({
          method: 'post',
          url: checkVerificationCodeReturnToken,
          data: {
            phone: phone,
            verificationCode: verificationCode,
          },
        })
          .then((res) => {
            this.errorState = true
            if (res.data.code === '0' && res.data.payload) {
              this.updatePasswordToken = res.data.payload
              this.phoneStepStatus = 2
              this.phoneDialogVisible = false
              this.phoneDialogVisible = false
              this.errorState = false
              this.phoneDialogPasswordUpdateVisible = true
            } else {
              this.errorState = true
            }
          })
          .catch(() => {
            this.errorState = true
          })
          .finally(() => {})
      } else {
        this.$message({
          type: 'warning',
          message: '验证码不能为空',
        })
        return
      }
    },
    //修改手机号下一步
    phoneNumberUpdateNext(phne, phoneNumberVerificationCode) {
      if (phoneNumberVerificationCode) {
        this.$axios({
          method: 'post',
          url: checkVerificationCodeReturnToken,
          data: {
            phone: phne,
            verificationCode: phoneNumberVerificationCode,
          },
        })
          .then((res) => {
            if (res.data.code === '0' && res.data.payload) {
              this.updatePhoneToken = res.data.payload
              this.phoneNumberVerificationCode = ''
              this.phoneNumberStepStatus = 2
              this.phoneDialogVisible = false
              this.phoneNumberDialogVisible = false
              this.phoneNumberupdateVisible = true
              this.errorState = false
              console.log('res:', res)
            } else {
              this.errorState = true
            }
          })
          .catch(() => {
            this.errorState = true
          })
          .finally(() => {})
      } else {
        this.$message({
          type: 'warning',
          message: '验证码不能为空',
        })
        return
      }
      this.verificationCode = ''
    },
    // 修改邮箱下一步
    updataEmailNext(phone, verificationCode) {
      if (this.verificationCode) {
        this.$axios({
          method: 'post',
          url: checkVerificationCodeReturnToken,
          data: {
            phone: phone,
            verificationCode: verificationCode,
          },
        })
          .then((res) => {
            this.errorState = true
            if (res.data.code === '0' && res.data.payload) {
              this.updataEmailToken = res.data.payload
              this.verificationCode = ''
              this.emailStepStatus = 2
              this.errorState = false
              this.phoneDialogVisible = false
              this.phoneEmailDialogVisible = false
              this.phoneEmailupdateVisible = true
            } else {
              this.errorState = true
            }
          })
          .catch(() => {
            this.errorState = true
          })
          .finally(() => {})
      } else {
        this.$message({
          type: 'warning',
          message: '验证码不能为空',
        })
        return
      }
      this.initModel()
    },
    updataPhpneNumberShow() {
      this.phoneNumberDialogVisible = true
      this.phoneNumberStepStatus = 1
      clearInterval(this.updatePhoneSendVerificationCodeInterval)
      this.updatePhoneVerificationStatus = 0
      clearInterval(this.sendRegistVerificationCodeByNewPhoneInterval)
      this.newPhoneVerificationStatus = 0
      this.initModel()
    },
    updatePhoneNumber() {
      this.$refs['updatePhoneForm'].validate((valid) => {
        console.log('valid:', valid)
        this.updatePhoneForm.verificationCode = this.verificationCode
        this.updatePhoneForm.tokenId = this.updatePhoneToken
        if (valid) {
          this.$axios({
            method: 'post',
            url: updatePhoneForPC,
            data: {
              ...this.updatePhoneForm,
            },
          })
            .then((res) => {
              if (res.data.code === '0') {
                this.$message({
                  type: 'success',
                  message: '账户修改成功!',
                })
                this.successTitle = '修改手机号'
                this.successReply = '恭喜您！手机号修改成功'
                this.prompt = '请在下次使用新的手机号登录'
                this.errorState = false
                this.phoneNumberupdateVisible = false
                this.updateSuccessVisible = true
              } else {
                this.errorState = true
              }
            })
            .catch(() => {
              this.errorState = true
            })
            .finally((res) => {
              console.log('res:', res)
            })
        }
      })
    },
    // 修改账户
    updateAccount() {
      this.$refs['updateAccountForm'].validate((valid) => {
        console.log('this.updateAccountForm:', this.updateAccountForm)
        if (valid) {
          this.updateAccountVisible = false
          this.updateAccountForm.password = md5(this.updateAccountForm.password)
          this.$axios({
            method: 'post',
            url: updateLoginName,
            data: {
              ...this.updateAccountForm,
            },
          })
            .then((res) => {
              if (res.status === 200) {
                this.$message({
                  type: 'success',
                  message: '账户修改成功!',
                })
                this.againLogin()
              }
            })
            .finally((res) => {
              console.log('res:', res)
            })
        }
      })
    },
    updateAccountShow() {
      this.updateAccountVisible = true
    },
    //重新登录
    againLogin() {
      this.$store.commit('logout')
      this.$router.replace(this.$PATH_CONST.login_page)
    },
    //修改密码updatePassword
    updatePassword() {
      let checkPassword =
        this.updatePasswordByPhoneForm.alignnewPassword ===
        this.updatePasswordByPhoneForm.newPassword
      if (!checkPassword) {
        this.$message({
          type: 'warning',
          message: '两次输入密码不一致',
        })
        return
      }
      this.$refs['updatePasswordByPhoneForm'].validate((valid) => {
        if (valid) {
          var parms = {
            tokenId: this.updatePasswordToken,
            newPassword: md5(this.updatePasswordByPhoneForm.newPassword)
          }
          console.log('parms', parms)
          this.$axios({
            method: 'post',
            url: updatePasswordByPhoneForPC,
            data: parms,
          })
            .then((res) => {
              if (res.data.code === '0') {
                this.$message({
                  type: 'success',
                  message: '密码修改成功!',
                })
                this.phoneStepStatus = 3
                this.phoneDialogVisible = false
                this.phoneDialogPasswordUpdateVisible = false
                this.updateSuccessVisible = true
                this.successTitle = '修改密码'
                this.successReply = '恭喜您！账号密码修改成功'
                this.prompt = '修改密码后需要使用新密码重新登录'
              } else {
                this.errorState = true
              }
            })
            .catch((e) => {
              this.errorState = true
            })
            .finally(() => {})
        }
      })
    },
    //手机验证码匹配
    checkVerificationCode(phone, type, verificationCode) {
      if (this.verificationCode) {
        this.$axios({
          method: 'post',
          url: checkVerificationCode,
          data: {
            phone: phone,
            verificationCode: verificationCode,
          },
        })
          .then((res) => {
            this.errorState = true
            if (res.code === '0') {
              this.verificationCode = ''
              this.phoneStepStatus = 2
              this.phoneDialogVisible = false
              this.phoneDialogPasswordUpdateVisible = true
              console.log('res:', res)
            } else {
              this.errorState = true
            }
          })
          .finally(() => {})
        this.phoneDialogPasswordUpdateVisible = true
      } else {
        this.$message({
          type: 'warning',
          message: '验证码不能为空',
        })
        return
      }
    },
    update_pwd() {
      this.dialogFormVisible = true
    },
    //通过原密码修改密码
    updaePassword() {
      console.log('this.form.newPassword:', this.form.newPassword)
      console.log('this.form.alignnewPassword:', this.form.alignnewPassword)
      let checkPassword = this.form.newPassword === this.form.alignnewPassword
      if (!checkPassword) {
        this.$message({
          type: 'warning',
          message: '两次输入密码不一致',
        })
        return
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // delete this.form.alignnewPassword
          let password = md5(this.form.password)
          let newPassword = md5(this.form.newPassword)
          var parms = {
            loginName: this.currentUserInfo.loginName,
            id: this.currentUserInfo.id,
            password: password,
            pwd: Encrypt(this.form.password),
            newPassword: newPassword,
          }
          console.log('parms', parms)
          this.$axios({
            method: 'post',
            url: updateUserPassword,
            data: parms,
          })
            .then((res) => {
              if (res.data.code === '0') {
                this.$message({
                  type: 'success',
                  message: '密码修改成功!',
                })
                this.dialogFormVisible = false
                this.againLogin()
              }
              console.log('this.currentUserInfo:', this.currentUserInfo)
            })
            .catch(() => {})
            .finally(() => {})
        }
      })
    },
    //手机修改密码获取验证码
    updatePasswordByPhoneSendVerificationCode(phone, type) {
      this.updatePasswordByPhoneTime = this.maxNumber
      let $this = this
      this.updatePasswordByPhoneVerificationStatus = 1
      let tiemeInterval = 0
      this.updatePasswordByPhoneSendVerificationCodeinterval = setInterval(
        function () {
          tiemeInterval++
          if (tiemeInterval === $this.maxNumber) {
            tiemeInterval = $this.maxNumber
            $this.updatePasswordByPhoneVerificationStatus = 2
            clearInterval(
              $this.updatePasswordByPhoneSendVerificationCodeinterval
            )
          }
          $this.updatePasswordByPhoneTime = $this.maxNumber - tiemeInterval
        },
        1000
      )

      console.log('phone:', phone)
      this.$axios({
        method: 'post',
        url: sendVerificationCode,
        data: {
          phone: phone,
          type: type,
        },
      })
        .then((res) => {
          if (res.status === 200) {
            console.log('res:', res)
          }
        })
        .finally(() => {})
    },
    //修改手机号获取验证码
    updatePhoneSendVerificationCode(phone, type) {
      let $this = this
      this.updatePhoneVerificationCodeTime = this.maxNumber
      this.updatePhoneVerificationStatus = 1
      let tiemeInterval = 0
      this.updatePhoneSendVerificationCodeInterval = setInterval(function () {
        tiemeInterval++
        if (tiemeInterval === $this.maxNumber) {
          tiemeInterval = $this.maxNumber
          $this.updatePhoneVerificationStatus = 2
          $this.updatePhoneVerificationCodeTime = $this.maxNumber
          clearInterval($this.updatePhoneSendVerificationCodeInterval)
        }
        $this.updatePhoneVerificationCodeTime = $this.maxNumber - tiemeInterval
      }, 1000)
      this.$axios({
        method: 'post',
        url: sendVerificationCode,
        data: {
          phone: phone,
          type: type,
        },
      })
        .then((res) => {
          if (res.status === 200) {
            console.log('res:', res)
          }
        })
        .finally(() => {})
    },
    //获取手机验证码（邮箱）
    emailByHonesendVerificationCode(phone, type) {
      let $this = this
      this.emailByphoneTime = this.maxNumber
      this.emailVerificationByPhoneStatus = 1
      let tiemeInterval = 0
      this.emailByHonesendVerificationCodeInterval = setInterval(function () {
        tiemeInterval++
        if (tiemeInterval === $this.maxNumber) {
          tiemeInterval = $this.maxNumber
          $this.emailVerificationByPhoneStatus = 2
          clearInterval($this.emailByHonesendVerificationCodeInterval)
        }
        $this.emailByphoneTime = $this.maxNumber - tiemeInterval
      }, 1000)
      console.log('phone:', phone)
      this.$axios({
        method: 'post',
        url: sendVerificationCode,
        data: {
          phone: phone,
          type: type,
        },
      })
        .then((res) => {
          if (res.data.code === '0') {
            console.log('res:', res)
          }
        })
        .finally(() => {})
    },
    //新手机号发送验证码
    sendRegistVerificationCodeByNewPhone(newPhone, type) {
      let reg = new RegExp(/^1[23456789][0-9]{9}$/)
      let result = reg.test(newPhone)
      if (!result) {
        this.$message({
          type: 'warning',
          message: '手机号不正确',
        })
        return
      }
      let $this = this
      this.newPhonesendRegistVerificationCodeTime = this.maxNumber
      this.$axios({
        method: 'post',
        url: sendRegistVerificationCodeByTokenId,
        data: {
          phone: newPhone,
          type: type,
          tokenId: this.updatePhoneToken
        },
      })
        .then((res) => {
          if (res.data.code === '0') {
            console.log('res:', res)
            $this.newPhoneVerificationStatus = 1
            let tiemeInterval = 0
            sendRegistVerificationCodeByNewPhoneInterval = setInterval(
              function () {
                tiemeInterval++
                if (tiemeInterval === $this.maxNumber) {
                  tiemeInterval = $this.maxNumber
                  $this.newPhoneVerificationStatus = 2
                  clearInterval(
                    $this.sendRegistVerificationCodeByNewPhoneInterval
                  )
                }
                $this.newPhonesendRegistVerificationCodeTime =
                  $this.maxNumber - tiemeInterval
              },
              1000
            )
          }
        })
        .finally(() => {})
    },
    //获取发送邮箱验证码
    sendMailVerificationCode(email) {
      let reg = new RegExp(
        /^([a-zA-Z0-9]+[_|bai\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
      )
      let result = reg.test(email)
      if (result) {
        let $this = this
        this.emailTime = this.maxNumber
        this.emailVerificationStatus = 1
        let tiemeInterval = 0
        this.sendMailVerificationCodeInterval = setInterval(function () {
          tiemeInterval++
          if (tiemeInterval === $this.maxNumber) {
            tiemeInterval = $this.maxNumber
            $this.emailVerificationStatus = 2
            clearInterval($this.sendMailVerificationCodeInterval)
          }
          $this.emailTime = $this.maxNumber - tiemeInterval
        }, 1000)

        console.log('email:', email)
        this.$axios({
          method: 'post',
          url: sendMailVerificationCodeByTokenId,
          data: {
            tokenId: this.updataEmailToken,
            email: email,
          },
        })
          .then((res) => {
            if (res.status === 200) {
              console.log('res:', res)
            }
          })
          .finally(() => {})
      }
    },
    handleDropdown(command) {
      if (command === 'logout') {
        this.$store.commit(command)
        this.$router.replace(this.$PATH_CONST.login_page)
      } else if (command === 'putPass') {
        this.detailVisible = true
      } else if (command === 'userInfo') {
        // this.getUserInfo()
        // this.cardinformation()
        this.$router.push('/systemSetup/personal')
      } else if (command === 'enterPriseCenter') {
        this.toEnterpriseCenter()
      }
    },
    getSysList() {
      this.allPageLoading = true
      this.$axios({
        url: getCurrentApps,
        method: 'post',
        data: {},
      })
        .then((res) => {
          if (res.data.code === '0') {
            let arr = hasIn(res, ['data', 'payload']) ? res.data.payload : []
            this.sysGroups = arr
            this.allPageLoading = false
            this.judgeLen(arr)
          }
        })
        .catch(() => {
          this.handleDropdown('logout')
          this.allPageLoading = false
        })
    },
    phoneClick() {
      this.phoneDialogVisible = true
      this.phoneStepStatus = 1
      this.initModel()
      clearInterval(this.updatePasswordByPhoneSendVerificationCodeinterval)
      this.updatePasswordByPhoneVerificationStatus = 0
    },
    initModel() {
      this.verificationStatus = 0
      this.verificationCode = ''
      this.errorState = false
      // this.time = 30
      // clearInterval(this.interval)
    },
    edit() {
      this.$router.push('/systemSetup/personal/edit')
    },
    cropperSubmit(res, type) {
      this.userImage = res.data.payload
      this.$axios({
        url: updateAvatar,
        method: 'post',
        data: {
          avatar: this.userImage,
        },
      })
        .then((res) => {
          if (res.data.code === '0') {
            this.$message.success('图像修改成功')
          }
        })
        .finally(() => {})
    },
    reUpload() {
      document.getElementsByClassName('el-upload')[0].click()
    },
    closeDialog(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields()
      })
    },
    async queryPersonalCertification() {
      const personInfo = await this.$axios.get(fddWebQueryPersonalCertification)
      this.personIfCertification = hasIn(personInfo, [
        'data',
        'payload',
        'ifCertification',
      ])
        ? personInfo.data.payload.ifCertification
        : false
    },
    goCertification() {
      this.$axios.get(fddWebApplyPersonalCertification).then((res) => {
        const {data} = res
        if (!Number(data.code)) {
          const payload = data.payload
          const applyPersonUrl = payload.fddUrl
          window.open(applyPersonUrl, '_blank')
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    goCertificationAgain() {
      this.$axios({
        method: 'get',
        url: companyRepeatCertification,
      })
        .then((res) => {
          if (res.data.code === '0') {
            let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
            if (obj.fddUrl) {
              window.open(obj.fddUrl, '_blank')
            }
          } else {
            this.$message.error(data.msg)
          }
        })
        .finally(() => {
          this.showDialog = false
        })
    },
    // 切换岗位
    choosePosition(val) {
      if (this.positionId === val) {
        this.$message.error('当前已是该岗位')
        return false
      }
      let item = {
        positionId: val,
      }
      this.$store.dispatch('choosePosition', {item})
    },
    toEnterpriseCenter() {
      this.$router.push({path: '/enterpriseCenter'})
    },
    //返回首页
    home() {
      console.log(this.$store.state.companyId) 
      let curCompanyId = this.$store.state.companyId
      if(curCompanyId === '0') {
        console.log(1)
        this.$router.push('/business')
      } else {
        console.log(2)
        this.$router.push('/')
      }
    },
    //关闭邮箱弹框
    closeEmailDialog() {
      this.emailUpdateSuccessVisible = false
    },
    bindingOpenPlatformWechat (code) {
      this.$axios({
        url: bindingOpenPlatformWechat,
        method: 'post',
        data: {
          code: code,
          source: 'm_pc_web'
        }
      })
        .then(res => {
          if (res.data.code === '0') {
            // cookie.remove('wechatCode')
            cookie.remove('bindWechatCode')
            this.getCurrentUserInfo()
            this.$message({
              message: '微信绑定成功！',
              type: 'success'
            });
          }
          console.log('====res:', res)
        })
        .catch(err => {
          // cookie.remove('wechatCode')
          cookie.remove('bindWechatCode')
          window.location.href = '/#/systemSetup/personal'
          reject(err);
        });
        console.log('====code:', code)
    },
    showCode() {
      this.codeShow = true
    },
    closeCode() {
      this.codeShow = false
    },
    unbind() {
      this.$confirm('确定解绑该微信?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          url: unbindingWechat,
          method: 'post',
          data: {}
        })
          .then(res => {
            if (res.data.code === '0') {
              this.$message({
                type: 'success',
                message: '解绑成功!'
              });
              this.getCurrentUserInfo()
            }
          })
          .catch(err => {
            reject(err);
          });
       
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解绑'
        });          
      });
    }
  },
}
</script>
<style lang="less">
@import '../m-front-common/pc/assets/var.less';
.personal_page {
  .split_bg {
    width: 100%;
    height: 15px;
    background-color: #f4f6fb;
  }
  .separator_box {
    .el-breadcrumb {
      height: 60px;
      line-height: 60px;
      color: #999;
      font-size: 16px;
    }
    .curry_item {
      .el-breadcrumb__inner {
        color: #333;
      }
    }

    width: 1200px;
    margin: 0 auto;
  }
  .tabs_box {
    width: 1200px;
    height: 50px;
    margin: 0 auto;
    line-height: 40px;
    .first_page {
      font-size: 16px;
      color: #999;
    }
    .personal_page {
      font-size: 16px;
      color: #333;
    }
    .personal_icon {
      margin: 0 8px;
    }
  }

  height: 100%;
  background-color: #f4f6fb;
  .nav-box {
    height: 100%;
    .el-header {
      padding: 0 48px;
      background-color: #fff;
      .logo-box {
        display: flex;
        align-items: center;
        .nav-logo {
          font-size: 45px;
          color: @themeBlue;
          vertical-align: middle;
        }
        .logo-name {
          height: 53px;
          background-color: #fff;
          font-size: 22px;
          color: @themeBlue;
          font-weight: bold;
          cursor: default;
          display: flex;
          align-items: center;
        }
      }
      .user-info {
        text-align: right;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .el-input__inner {
          border: none;
        }
        .position {
          display: flex;
          align-items: center;
          margin-right: 15px;
          .positionInfo {
            display: flex;
            flex-direction: column;
          }
        }
        .info-company {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          margin-right: 30px;
        }

        .icon-group {
          width: 140px;
          display: flex;
          justify-content: space-evenly;

          .icon-btn {
            cursor: pointer;
          }

          .el-badge__content {
            border: none;
          }
        }
      }
    }
    .el-main {
      padding: 16px 48px;
      padding-top: 0;
      .system-classify-box {
        padding: 0;
        width: 100%;
        overflow: hidden;
        background-color: #fff;
        padding-bottom: 4px;
        margin-bottom: 16px;
        .classify-title {
          list-style: none;
          font-weight: 400;
          font-size: 18px;
          color: #26344c;
          line-height: 20px;
          margin: 24px 0 44px 26px;
        }
        .classify-list {
          display: flex;
          flex-wrap: wrap;
          .classify-item {
            list-style: none;
            margin-bottom: 44px;
            width: 33%;
            display: flex;
            justify-content: center;
            align-items: center;
            .el-card {
              width: 310px;
              border-radius: 0;
              cursor: pointer;
              .el-card__body {
                padding: 16px;
                display: flex;
                align-items: center;
                .system-icon {
                  width: 60px;
                  height: 60px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin-right: 8px;
                  border-radius: 4px;
                  &.font-icon-apps-001 {
                    background-color: #428cc4;
                  }
                  &.font-icon-apps-002 {
                    background-color: #338ced;
                  }
                  &.font-icon-apps-003 {
                    background-color: #ed9033;
                  }
                  &.font-icon-apps-004 {
                    background-color: #338ced;
                  }
                  &.font-icon-apps-005 {
                    background-color: #00c7c5;
                  }
                  &.font-icon-apps-006 {
                    background-color: #f09850;
                  }
                  &.font-icon-apps-007 {
                    background-color: #dbb31b;
                  }
                  &.font-icon-apps-008 {
                    background-color: #15bc84;
                  }
                  &.font-iconbokeyun {
                    background-color: #2371c5;
                  }
                  &.font-iconbokedileyun1 {
                    background-color: #2371c5;
                  }
                  &.font-bokedileyun {
                    background-color: #2371c5;
                  }
                  &.font-iconbkdly {
                    background-color: #2371c5;
                  }
                  &.font-jxt-sy-gkdspt-icon {
                    background-color: #2371c5;
                  }
                  &.font-iconjxt-sy-gkdspt-icon2x {
                    background-color: #2371c5;
                  }
                  .iconfont {
                    font-size: 40px;
                    color: #fff;
                  }
                }
                .system-name-box {
                  flex: 1;
                  .system-name {
                    color: @themeBlue;
                    font-size: 20px;
                    line-height: 20px;
                    margin-bottom: 8px;
                    overflow: hidden;
                    &.font-icon-apps-001 {
                      color: #428cc4;
                    }
                    &.font-icon-apps-002 {
                      color: #338ced;
                    }
                    &.font-icon-apps-003 {
                      color: #ed9033;
                    }
                    &.font-icon-apps-004 {
                      color: #338ced;
                    }
                    &.font-icon-apps-005 {
                      color: #00c7c5;
                    }
                    &.font-icon-apps-006 {
                      color: #f09850;
                    }
                    &.font-icon-apps-007 {
                      color: #dbb31b;
                    }
                    &.font-icon-apps-008 {
                      color: #15bc84;
                    }
                  }
                  .system-company-name {
                    font-size: 14px;
                    height: 16px;
                    line-height: 16px;
                    color: #a7b1c7;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                  .system-desc {
                    line-height: 16px;
                    font-size: 12px;
                    color: #a7b1c7;
                    height: 32px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                  }
                }
              }
            }
          }
        }
      }
      .system-no-data {
        font-size: 16px;
        text-align: center;
        padding: 15px;
        border-radius: 5px;
        margin: 30px 30%;
        border: 1px solid #ccc;
        color: #606266;
      }
    }
  }
  .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
  }
  // .el-dialog__header {
  //   border: none;
  // }
  .el-dialog__body .description {
    font-size: 14px;
    color: #9ca6c7;
    margin-left: 80px;
    left: -8px;
  }
  .phone_Number_dialog_box .news,
  .phone_Number_dialog_box .phone_number_box {
    text-align: center;
    font-size: 14px;
    color: #666;
    height: 24px;
    line-height: 25px;
  }
  .phone_dialog_box .news,
  .phone_email_dialog_box .news,
  .phone_dialog_box .phone_number_box,
  .phone_email_dialog_box .phone_number_box {
    text-align: center;
    font-size: 14px;
    color: #666;
    height: 30px;
    line-height: 30px;
  }

  .steps_box {
    margin-bottom: 27px;
  }

  .phone_number_box {
    color: #666 !important;
    font-size: 16px !important;
    font-weight: bold;
    margin: 3px 0 29px 0;
  }
  .phone_number {
    font-size: 16px;
    color: #d85365;
  }
  .verification_code_box {
    width: 350px;
    height: 43px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    border: 1px solid #ccc;
    line-height: 43px;
    border-radius: 5px;
  }
  .verification_code {
    width: 195px;
  }
  .verification_code_box .el-input__inner {
    width: 195px;
    height: 43px;
    border: none !important;
  }
  .get_verification_code {
    margin-right: 6px;
    cursor: pointer;
    color: #2371c5;
  }
  .aggin_get_verification_code {
    margin-right: 6px;
    cursor: pointer;
    color: #2371c5;
  }
  .get_verification_code_after {
    color: #ccc;
    margin-right: 6px;
  }
  .el-icon-message {
    font-size: 14px;
  }
  .next_btn {
    width: 162px;
    height: 45px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background-color: #2371c5;
    line-height: 45px;
    border-radius: 5px;
    margin: 0 auto;
    margin-top: 40px;
  }
  .phone_dialog_box .el-dialog__body,
  .phone_dialog_update_password_box .el-dialog__body {
    // padding: 30px 55px 35px 55px;
  }
  .remember_password {
    font-size: 14px;
    margin-bottom: 10px;
    text-indent: 52px;
  }
  .phone_dialog_update_password_box {
    input {
      border-radius: 5px;
    }
  }
  .el-step__title {
    font-size: 12px;
  }
  .success_icon {
    text-align: center;
    font-size: 72px;
    font-weight: bold;
    color: #7ed96d;
    margin-bottom: 18px;
  }
  .success_reply {
    font-size: 16px;
    color: #000;
    font-weight: bold;
    text-align: center;
  }
  .prompt {
    text-align: center;
    margin-bottom: 68px;
  }
  .error_box {
    border: 1px solid #f56c6c;
    background-color: #ffeee6;
    color: #f56c6c;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 10px;
    border-radius: 5px;
    width: 350px;
    margin: 0 auto;
    margin-top: 10px;
  }
  .el-icon-male {
    color: #338ced;
    font-weight: bold;
    font-size: 20px;
  }
  .girl {
    color: #f56c6c;
    font-size: 18px;
    font-weight: bold;
  }
  .home {
    cursor: pointer;
    font-size: 16px;
    // font-weight: bold;
    color: #999;
  }
  input::-webkit-input-placeholder {
    color: #d6d6d6;
  }
  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #d6d6d6;
  }
  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #d6d6d6;
  }
  input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #d6d6d6;
  }
  .el-dialog__body {
    padding-top: 58px;
  }
  .girlIcon,
  .boyIcon {
    width: 22px;
    height: 22px;
    margin-bottom: -3px;
    margin-left: -2;
  }
  //弹框样式
  .el-dialog {
    .el-step__head.is-wait {
      border-color: #e4ecf3;
      .el-step__icon {
        background-color: #e4ecf3;
        color: #fff;
        font-size: 18px;
      }
    }
    .el-step__head.is-process {
      border-color: #e4ecf3;
      .el-step__icon {
        background-color: #e4ecf3;
        color: #fff;
        font-size: 18px;
      }
    }
    .el-step__head.is-finish {
      border-color: #479af2;
      .el-step__icon {
        background-color: #479af2;
        color: #fff;
        font-size: 18px;
      }
    }

    border-radius: 8px;
    .el-dialog__title {
      font-size: 16px;
      color: #333;
      letter-spacing: 0;
      position: relative;
      top: -4px;
    }
    input {
      text-indent: 10px;
    }
    .el-form-item__error {
      top: 42px;
      left: 28px;
    }
  }
  .dialog_update_success {
    .el-dialog__body {
      padding-top: 35px;
    }
    .next_btn {
      margin-bottom: 44px;
    }
  }
  .updae_password_box,
  .updae_login_box {
    .el-form-item {
      margin-bottom: 20px;
      height: 70px;
      .el-form-item__label {
        position: relative;
        top: -38px;
        left: 44px;
        text-align: left;
      }
      .el-form-item__content {
        position: relative;
        left: -46px;
        .el-input__inner {
          border-radius: 5px;
          border: 1px solid #e6e6e6;
        }
      }
      .icon_start {
        position: absolute;
        top: -35px;
        left: 46px;
        font-size: 14px;
        color: #e00000;
        font-weight: bold;
      }
    }
    .alignnewPassword_box {
      height: 40px;
      position: relative;
      top: -30px;
    }
    .description {
      position: relative;
      top: -35px;
      font-size: 14px;
      color: #9ca6c7;
    }
    .dialogClose {
      width: 98px;
      height: 38px;
      position: relative;
      left: -145px;
      border: 1px solid #e4ecf3;
      border-radius: 5px;
      top: -22px;
    }
    .dialogOk {
      width: 98px;
      height: 38px;
      position: relative;
      left: -126px;
      border: 1px solid #e4ecf3;
      border-radius: 5px;
      top: -22px;
      background-color: #2371c5;
    }
    .el-dialog__footer {
      border: none;
      padding: 0;
      margin-top: -10px;
    }
  }
  .el-step__icon {
    width: 36px !important;
    height: 36px !important;
    // border-color: #479AF2 ;
  }
  .el-step.is-center .el-step__line {
    height: 1px;
    // border: 1px dashed #e4ecf3;
    width: 85px;
    margin-left: 35px;
    margin-top: 5px;
    border-color: #cdd2dc;
    background-color: #cdd2dc;
  }
  .personal_page .el-dialog .el-step__head.is-process {
    border-color: #cdd2dc;
  }
  .personal_page .el-dialog .el-step__head.is-finish {
    border-color: #cdd2dc;
  }
  .el-step__title.is-finish {
    color: #333;
    font-size: 12px;
  }
  .el-step__title.is-process {
    color: #999;
    font-size: 12px;
    font-weight: normal;
  }
  .el-step__title.is-wait {
    color: #999;
    font-size: 12px;
  }
  .el-steps {
    width: 483px;
    margin-top: -32px;
    margin-left: -24px;
  }
  .dialog_form_box {
    width: 350px;
    margin: 0 auto;
    input {
      border-radius: 5px;
      margin-bottom: 22px;
    }
  }
  // .el-image__inner{
  //   vertical-align: inherit;
  // }

  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before,
  .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before {
    position: relative;
    left: 56px;
    font-weight: bold;
  }
  .login_name_box {
    label {
      text-indent: -11px;
    }
  }
  .login_container_middle{
    width: 350px;
    height: 450px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .close_code{
      font-size: 26px;
      float: right;
      cursor: pointer;
      position: relative;
      right: -20px;
      top:-5px;
    }
  }
  .login_container_box{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 100;
  }
}

//页面样式
.login_box {
  widows: 100%;
  display: flex;
  justify-content: flex-start;
  padding-left: 92px;
  margin-bottom: 60px;
  padding-top: 20px;
}
.login_bg_box {
  width: 1200px;
  background:
    #fff
    url('../../../../m-front-common/pc/assets/personl/jibenxinxiditu.png')
    no-repeat bottom;
  margin: 0 auto;
  height: 175px;
}

.login_picture {
  width: 134px;
  height: 134px;
  overflow: hidden;
  margin-right: 20px;
  border-radius: 100px;
  border: 5px solid #ddedff;
  position: relative;
  .user_image {
    width: 124px;
    height: 124px;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.login_info {
  width: 800px;
  height: 70px;
  margin-top: 21px;
}
.user_name {
  font-size: 18px;
  color: #000;
  font-weight: bold;
  margin-bottom: 10px;
}
.date {
  font-size: 14px;
  color: #999;
}

.main_box .title_box {
  width: 100%;
  height: 58px;
  line-height: 58px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e6e6e6;
  margin-top: 5px;
  .el-button {
    font-weight: 400;
  }
  .title_type {
    position: relative;
    // 勿删
    font-size: 0;
    >span {
      font-size: 16px;
    }
    .el-image {
      position: relative;
      bottom: -3px;
    }
  }
}
.main_box .title_accoun {
  display: flex;
  justify-items: flex-start !important;
}

.main_box {
  background-color: #fff;
  width: 1200px;
  margin: 0 auto;
  padding: 20px 0 40px 40px;
  .title_type {
    font-size: 16px;
    color: #333;
    .el-image {
      margin-right: 7px;
    }
  }
  .title_icon {
    font-size: 18px;
    margin-right: 5px;
  }
  .edit {
    cursor: pointer;
    margin-right: 42px;
    color: #4d84ff;
  }
  .profile_box {
    padding: 25px;
    padding-left: 92px;
    padding-top: 8px;
  }
  .profile_set_box {
    padding: 0;
    position: relative;
    left: 92px;
  }
  .profile_box::after {
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
  }
  .profile_box_item {
    width: 435px;
    height: 40px;
    line-height: 68px;
    float: left;
    display: flex;
    justify-content: flex-start;
  }
  .idCard {
    position: relative;
    left: -14px;
  }
  .account_profile_box_item {
    width: 435px;
    height: 68px;
    line-height: 68px;
    float: left;
    display: flex;
    justify-content: flex-start;
    margin: 23px 135px 40px 0;
    .iconfont {
      font-size: 16px;
    }
    .el-button {
      font-weight: 400;
    }
  }
  .icon_box {
    width: 26px;
    height: 70px;
    margin-right: 20px;

    .el-image {
      width: 26px;
      height:26px;
      top: 15px;
      img{
        width: 26px;
        height:26px;
      }
    }
  }
  .set_icon {
    font-size: 28px;
    font-weight: bold;
    color: #f09850;
  }
  .account_box {
    div {
      height: 30px;
      line-height: 30px;
    }
    .account_title {
       font-size: 16px;
       color: #333;
        .adopt {
          color: rgb(44,188,48);
        }
        .refuse {
          color: rgb(240,157,73);
        }
        .iconpc-alert_ywcrz1x{
          color: rgb(44,188,48);
        }
        .iconpc-alert_wrzsq1x {
          color: rgb(240,157,73);
        }
    }
    .account_prompt {
      width: 500px !important;
      color: #999;
      font-size: 14px;
    }
    span {
      color:#4D84FF;
      margin-right: 20px;
      // margin-left: -8px;
      cursor: pointer;
      i {
        margin-right: 3px;
      }
    }
    .unauthenticated {
      color: #ffa84f;
      font-size: 16px;
      margin-left: 0 !important;
    }
    .isOk {
      color: #9cd17c;
      font-size: 16px;
      margin-left: 0 !important;
    }

    .gotosure span {
      margin-left: -5px;
    }
    .cuury_phone {
      color: #db5063;
      margin-left: 10px;
    }
    .we_chat {
      margin-right: 18px;
      color: #333;
    }
    .authentication {
      color: #333;
    }
  }
  .account_title_box {
    margin-top: 50px;
  }
  .el-dialog__title {
    font-size: 14px !important;
    font-weight: bold;
    color: #338ced;
  }
  .we_chat {
    margin-right: 0;
  }

  .IconPerson,
  .weirenzheng,
  .shuru,
  .girlIcon,
  .boyIcon,
  .yinzhangIcon,
  .weixin2,
  .zhseIcon {
    width: 18px;
    height: 18px;
  }
  .shuru,
  .yirenzheng,
  .weirenzheng {
    width: 14px;
    height: 14px !important;
    margin-left: 12px;
    margin-right: 4px;
    margin-bottom: -2px;
  }
  .profile_label {
    color: #999;
    font-size: 14px;
    margin-right: 30px;
  }
  .cuury_phone {
    color: #db5063;
    font-size: 16px;
    margin-right: 16px;
  }
}
</style>
